<template>
	<view class="group_info_container">
		<view class="mt_8 plr_16 ptb_12 bc_fff" v-if="dataInfo.productApiDetailVo">
			<GoodsCard :data="dataInfo.productApiDetailVo" type="group-card" :goodsType="5" />
		</view>
		<view class="mt_8 plr_28 pt_16 pb_32 bc_fff fx fx_col aic">
			<Divider :text="dataInfo.status==2?'已结束':'距结束'" color="#FE0000" />
			<view style="height:20rpx"></view>
			<view v-if="dataInfo.status!=2">
				<CountDown :time="new Date(dataInfo.endTime).getTime()-new Date().getTime()"
					@finish="dataInfo.status==0&&getData()" />
			</view>
			<view class="mt_16" v-if="dataInfo.status==0">
				拼团中，还差<text class="fc_r">{{dataInfo.openGroup||dataInfo.participantsNumber||0}}人</text>拼团成功
			</view>
			<view class="mt_16" v-if="dataInfo.status==1">
				开团成功！
			</view>
			<view class="mt_16" v-if="dataInfo.status==2">
				超时未满员，拼团失败！
			</view>
			<view class="mt_32 width_280 fx fx_w grid_24">
				<image class="width_52 height_52 br50" :src="item" v-for="item,index in avatarList" :key="index">
				</image>
			</view>
			<view class="mt_16 height_22 lh_22" v-if="dataInfo.status==1&&dataInfo.isGroup">
				恭喜拼团成功，去订单中操作付款吧~
			</view>
			<view class="mt_24 w100">
				<button class="w100 p_0 br_57 lh_44 fc_fff bc_r fz_14 mtafter_16"
					v-if="dataInfo.status==0&&dataInfo.isGroup"
					open-type="share">邀请好友参团</button>
				<navigator class="mtafter_16" hover-class="none"
					:url="`/pages/goods/pages/detail?id=${dataInfo.productApiDetailVo.id}&goodsType=5&groupPinkId=${dataInfo.groupRecordId}`"
					v-if="dataInfo.status==0&&dataInfo.customerId!=userInfo.customerId&&!dataInfo.isGroup">
					<button class="w100 p_0 br_57 lh_44 fc_fff bc_primary mt_16 fz_14">立即参团</button>
				</navigator>
				<navigator class="mtafter_16" hover-class="none"
					:url="`/pages/person/pages/order_detail?id=${dataInfo.orderId}`"
					v-if="dataInfo.status==1&&dataInfo.isGroup">
					<button class="w100 p_0 br_57 lh_44 fc_fff bc_primary mt_16 fz_14">查看订单详情</button>
				</navigator>
				<button class="custom_btn default p_0 d br_57 lh_44 fc_fff fz_14 mtafter_16"
					style="background-color: #999;" disabled
					v-if="dataInfo.status==1&&dataInfo.customerId!=userInfo.customerId&&!dataInfo.isGroup">该拼团已满员</button>
				<navigator class="mtafter_16" hover-class="none"
					:url="`/pages/goods/pages/detail?id=${dataInfo.productApiDetailVo.id}&goodsType=5&groupId=${dataInfo.groupRecordId}`"
					v-if="(dataInfo.status==1||dataInfo.status==2)&&!dataInfo.isGroup">
					<button class="w100 p_0 br_57 lh_44 fc_fff bc_primary mt_16 fz_14">我要开团</button>
				</navigator>
				<button class="custom_btn default p_0 d br_57 lh_44 fc_fff bc_fff fz_14 mtafter_16 boc_333 bo_1"
					v-if="(dataInfo.status==1||dataInfo.status==2)&&dataInfo.isGroup&&dataInfo.customerId==userInfo.customerId"
					@click="handleDelete">删除记录</button>
			</view>
		</view>
	</view>
</template>

<script>
	import GoodsCard from '@/components/goods/GoodsCard.vue'
	import CountDown from '@/components/CountDown'
	import Divider from '@/components/Divider.vue'
	import share from '@/mixins/share.js'
	import api from '@/service/config/api'
	import {
		mapState
	} from 'vuex'
	export default {
		mixins: [share],
		components: {
			GoodsCard,
			CountDown,
			Divider
		},
		data() {
			return {
				timeData: {},
				sharePath: '/pages/goods/pages/group_info', // 分享连接
				dataParams: {},
				dataInfo: {}
			}
		},
		computed: {
			...mapState(['userType','userInfo']),
			avatarList() {
				if (this.dataInfo.maxPlayers) {
					return new Array(this.dataInfo.maxPlayers).fill('').map((item, index) => this.dataInfo
						.groupRecordVoList[
							index] ?
						this.dataInfo.groupRecordVoList[index].customerHeadUrl : require(
							'@/static/images/empty_icon1.png'))
				} else {
					return []
				}
			},
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
				this.getData()
			} else {
				this.$utils.showToast('暂无此拼团信息', 1500, 1)
			}
		},
		methods: {
			getData() {
				this.$utils.loading()
				api.get('/goods/api/product/userGroupDetail', {
					id: this.id,
					...this.$store.state.userInfo.customerId ? {
						

					...this.$store.state.userInfo.customerId ? {

						customerId: this.$store.state.userInfo.customerId

					} : {},
					} : {},
					userType: this.$store.state.userInfo.identityType || 1
				}).then(res => {
					this.dataInfo = res.data
					this.shareTitle = `您的好友邀您参与【${this.dataInfo.productApiDetailVo.productName}】的拼团~`
					this.sharePath =
						`/pages/goods/pages/group_info?id=${this.dataInfo.id}&customerId=${this.$store.state.userInfo.customerId}`
					this.shareImageUrl = this.$utils.getStaticUrl(this.dataInfo.productApiDetailVo.coverImageUrl)
				})
			},
			onChangeCountdown(e) {
				this.timeData = e
			},
			handleDelete() {
				this.$utils.showModal({
					content: '确认删除此记录？',
				}).then(() => {
					this.$utils.loading()
					api.get('/marketing/api/groupGoodsRecord/delete', {
						groupGoodsRecordId: this.dataInfo.groupRecordId
					}).then(() => {
						this.$utils.navigateBack(1)
					})
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.group_info_container {
		/deep/.u-line {
			border-width: 4rpx !important;
		}

		.point {
			position: absolute;
			margin: auto 0;
			top: 0;
			bottom: 0;
			width: 12rpx;
			height: 12rpx;
			border-radius: 50%;
			background-color: $primaryColor;

			&:first-of-type {
				left: 54rpx;
			}

			&:last-of-type {
				right: 54rpx;
			}
		}
	}
</style>